<template>
  <div>
    <div class="gutter-box">
      <a-row class="self-box">
        <a-col span="7">
          <div class="payImg">
            <div class="insert" > 
              <img :src="img" alt=""> 
              <!-- <img src="@/assets/imgs/ic_appmanage_alipay.png" alt=""> 
              <img src="@/assets/imgs/ic_appmanage_unionpay.png" alt="">  -->
            </div>
            <div style="text-align:center;">支付宝收银</div>
          </div>
        </a-col>
        <a-col span="7" offset="1" class="on-pay">
          <div class="in">0.60 <span>%</span></div>
          <div>当面付</div>
        </a-col>
        <a-col span="7" offset="1" class="on-pay">
          <div class="in other" v-if="open === 1">0.60 <span>%</span></div>
          <div class="insert" v-if="open === 0">暂未开通</div>
          <div class="insert" v-if="open === 2">已手动关闭</div>
          <div>预授权</div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    img: {
      type: String,
      default: ''
    },
    open: {
      type: Number,
      default: 0
    }
  }
}
</script>
<style lang="less" scoped>
.payImg {
  border-right: 1px solid #EBEEF5;
  padding-right: 15px;
  height:87px;
  img {
    display: block;
    margin: 0 auto;
    width: 66px;
    height: 66px;
  }
}
.self-box {
  border:1px solid #EBEEF5;
  padding:30px;
  border-radius: 5px;
}
.on-pay {
  text-align:center;
  height:87px;
  color: #666666;
  .in {
    margin: 18px 0 10px 0;
    font-size: 26px;
    color: #08AAEC;
    span {
      font-size: 14px;
    }
  }
  .insert {
    margin: 26px 0 20px 0;
    font-size: 14px;
    color: #666666;
  }
  .other {
    color: #FF2C49;
  }
}
</style>